<template>
  <!--登录配置用户信息收集-->
  <view class="AddUserInfoPopup">
    <u-popup :show="isPopup" :round="15" mode="bottom" @close="onClose" safe-area-inset-bottom>
      <view class="title">填写信息</view>
      <view class="content f_1 scroll-y">
        <view v-for="(item, index) in list" :key="index">
          <!--输入框-->
          <view class="item borderBottom flex flex-column text" :class="item.type === '1' ? 'text' : 'checkbox'">
            <view class="item-title">
              <label v-if="item.required">*</label>
              <text class="line-1">{{ item.label }}</text>
            </view>
            <!--输入框-->
            <textarea placeholder-style="color:#999999" :placeholder="item.desc" v-model="item.value"
              v-if="item.type === '1'" />
            <view v-else class="select-box">
              <!--单选-->
              <radio-group v-if="item.multi === '1'" @change="radioChange($event, item)"
                class="flex flex-row item-center f_wrap">
                <view class="flex flex-row item-center" style="margin-top: 9px" v-for="(option) in item.options"
                  :key="option">
                  <radio :value="option" :color="radioColor" style="transform:scale(0.9);margin-left: 10px" />
                  <text> {{ option }}</text>
                </view>
              </radio-group>
              <!--多选-->
              <checkbox-group v-if="item.multi === '2'" @change="checkboxChange($event, item)"
                class="flex flex-row item-center f_wrap">
                <view class="flex flex-row item-center" style="margin-top: 9px" v-for="(option) in item.options"
                  :key="option">
                  <checkbox :value="option" :color="radioColor" style="transform:scale(0.9);margin-left: 10px" />
                  <text> {{ option }}</text>
                </view>
              </checkbox-group>
            </view>
          </view>
        </view>
      </view>
      <view class="footer fs_0">
        <view class="confirm btn" @click="confirm">确定</view>
        <view class="line"></view>
        <view class="close btn" @click="onClose">取消</view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { saveUpgPracticeInformationJson } from "@/improve/services";
import { mapState } from 'vuex'

export default {
  name: "AddUserInfoPopup",
  data() {
    return {
      isPopup: false,
      item: null,
      radioColor: "#37B874",
      list: [
        {
          label: "考生姓名",
          value: "",
          disable: true,
          required: true,
          desc: "",
          type: "1",
          multi: "1",
          options: [""]
        },
        {
          label: "手机号码",
          value: "",
          disable: true,
          required: true,
          desc: "",
          type: "1",
          multi: "1",
          options: [""]
        },
        {
          label: "证件类型",
          value: "",
          disable: false,
          required: true,
          desc: "",
          type: "2",
          multi: "1",
          options: ["身份证", "护照", "户口本", "身份证1", "护照2", "户口本3", "身份证4", "护照5", "户口本6"]
        },
        {
          label: "爱好",
          value: "",
          disable: false,
          required: false,
          desc: "",
          type: "2",
          multi: "2",
          options: ["香蕉", "苹果", "葡萄", "身份证", "护照", "户口本", "身份证1", "护照2", "户口本3",]
        }
      ]
    }
  },
  computed: {
    ...mapState(['practiceSettings'])
  },
  methods: {
    onClose() {
      this.isPopup = false;
      this.$emit("close")
    },
    async open(item) {
      this.loginKey = ""
      this.item = item;
      this.list = JSON.parse(item.informationJson)
      this.isPopup = true;
    },
    async confirm() {
      const item = this.list.find((item) => item.required && !item.value)
      if (item) {
        uni.showToast({
          title: item.desc,
          icon: "none",
          duration: 2000
        });
        return;
      }
      // 获取本地code - 验证机位绑定
      const uniqueCode = uni.getStorageSync('uniqueCode');
      const verification = await saveUpgPracticeInformationJson({ id: this.item.id, uniqueCode }, this.list)
      if(verification.uniqueCode) {
        uni.setStorageSync('uniqueCode', verification.uniqueCode)
      }
      this.$emit("success", this.item, verification);
      this.isPopup = false;
    },
    radioChange(evt, item) {
      item.value = evt.detail.value;
    },
    checkboxChange(evt, item) {
      item.value = evt.detail.value;
    }
  },
}
</script>
<style scoped lang="scss">
.AddUserInfoPopup {
  .title {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    height: 75px;
    line-height: 75px;
  }

  .content {
    .item {
      padding: 18px 22px;
      border-bottom: 1px solid #EEEEEE;
      font-size: 14px;
      color: #000000;
    }

    .textarea-item {
      padding: 0 22px;
      padding-bottom: 15px;
    }

    textarea {
      background-color: #F9F9F9;
      border-radius: 10px;
      height: 44px;
      padding: 13px 16px;
      margin-left: 12px;
      width: calc(100% - 32px);
      margin-top: 9px;
      text-align: left;
      font-size: 16px;
      color: #333333;
    }

    .item-title {
      label {
        color: #f56c6c;
        margin-right: 4px;
        font-size: 18px;
      }

      text {
        color: #333333;
        font-size: 32rpx;
      }
    }

    .select-box {
      // margin-top: 9px;
    }
  }

  .btn {
    height: 74px;
    text-align: center;
    line-height: 74px;
    color: #000000;
    font-size: 14px;
  }

  .line {
    width: 100%;
    background-color: #F2F2F2;
    height: 6rpx;
  }
}
</style>